import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';

class Title extends Component {
  render() {
    return (
      <div>
        <h1>React 小书</h1>
      </div>
    )
  }
}
class Header extends Component {
  constructor() {
    super()
    this.state = {
      is_show: false,
      num: 0
    }
  }
  onTitleClick(e) {
    // console.log(e.target);
    this.setState({
      is_show: !this.state.is_show,
    })

    console.log('before', this.state.num);
    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })
    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })
    console.log('after', this.state.num);
  }
  render() {
    return (
      <div>
        <Title/>
        <div onClick={this.onTitleClick.bind(this)}>点我改变状态(点了 {this.state.num} 次)</div>
        {this.state.is_show? <div>显示</div>:<div>隐藏</div>}
      </div>
    )
  }
}
class Main extends Component {
  render() {
    return (
      <div>Main</div>
    )
  }
}
class Footer extends Component {
  render() {
    return (
      <div>Footer</div>
    )
  }
}
class Index extends Component {
  render() {
    return (
      <div>
        <Header/>
        <Main/>
        <Footer/>
      </div>
    )
  }
}

ReactDOM.render(<Index />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
